<template>
  <div class="ChartTab">
    <el-tabs v-model="activeName">
      <el-tab-pane
        :label="
          MonitorTypeId === 3 || MonitorTypeId === 4
            ? '监测点变形分析'
            : '变化趋势'
        "
        name="1"
      />
      <el-tab-pane
        v-if="MonitorTypeId === 3 || MonitorTypeId === 4"
        label="监测点变形速率分析"
        name="2"
      />
    </el-tabs>
    <div class="content">
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 开始时间 -->
          <el-form-item label="开始时间" class="margin-margin-margin-left">
            <el-date-picker
              v-model="formInline.startTime"
              size="mini"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>

          <!-- 结束时间 -->
          <el-form-item label="结束时间" class="margin-margin-margin-left">
            <el-date-picker
              v-model="formInline.endTime"
              size="mini"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>

          <!-- 时间类型 -->
          <el-form-item
            label="时间类型"
            v-if="
              MonitorTypeId === 3 || MonitorTypeId === 4 || MonitorTypeId === 6
            "
          >
            <el-select
              v-model="formInline.timeType"
              clearable
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in timeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button class="sub" type="primary" size="mini" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="echarts">
        <TwiceLine
          v-if="visible"
          class="echarts-line"
          :key="MonitorTypeId"
          :MonitorTypeId="MonitorTypeId"
          :data="finalDataLine"
          :xAxisData="xAxisData"
          :firstLevel="firstLevel"
          :secondLevel="secondLevel"
          :thirdLevel="thirdLevel"
        />
      </div>
    </div>
  </div>
</template>

<script>
import EchartsLine from "./Chaets/EchartsLine";
import TwiceLine from "./Chaets/TwiceLineNew";
import TwiceLine2 from "./Chaets/TwiceLine2";
import { getMonitorDataResponseGpList } from "../../../../../api/api";
import moment from "moment";

export default {
  name: "ChartTab",

  components: {
    EchartsLine,
    TwiceLine,
    TwiceLine2,
  },

  props: {
    visible: Boolean,
    MonitorCode: [String, Number],
    MonitorTypeId: [String, Number],
  },

  data() {
    return {
      activeName: "1",
      dataLine: [], //图表数据
      firstLevel: null,
      secondLevel: null,
      thirdLevel: null,
      formInline: {
        startTime: moment().subtract(1, "month").format("YYYY-MM-DD 00:00:00"), //开始时间
        endTime: moment().format("YYYY-MM-DD 23:59:59"), //结束时间
        timeType: "", //时间类型
      },
    };
  },

  computed: {
    finalDataLine() {
      const list = this.dataLine;
      const activeName = this.activeName;
      if (this.MonitorTypeId === 3) {
        //表面位移
        if (activeName === "1") {
          return [
            {
              name: "X方向变量",
              data: list.map((item) => item.totalX),
            },
            {
              name: "Y方向变量",
              data: list.map((item) => item.totalY),
            },
            {
              name: "H方向变量",
              data: list.map((item) => item.totalH),
            },
            {
              name: "P方向变量",
              data: list.map((item) => item.totalP),
            },
          ];
        }
        if (activeName === "2") {
          //库水位
          return [
            {
              name: "X方向速率",
              data: list.map((item) => item.gxSpeed),
            },
            {
              name: "Y方向速率",
              data: list.map((item) => item.gySpeed),
            },
            {
              name: "H方向速率",
              data: list.map((item) => item.ghSpeed),
            },
            {
              name: "P方向速率",
              data: list.map((item) => item.gpSpeed),
            },
          ];
        }
      }
      if (this.MonitorTypeId === 4) {//内部位移
        // this.formInline.startTime = moment()
        //   .subtract(7, "d")
        //   .format("YYYY-MM-DD 00:00:00"); //开始时间

        if (activeName === "1") {
          return [
            {
              name: "N2-1-3",
              data: list.map(
                (item) =>
                  item.dataList && item.dataList[0] && item.dataList[0].xdata
              ),
            },
            {
              name: "N2-1-2",
              data: list.map(
                (item) =>
                  item.dataList && item.dataList[1] && item.dataList[1].xdata
              ),
            },
            {
              name: "N2-1-1",
              data: list.map(
                (item) =>
                  item.dataList && item.dataList[2] && item.dataList[2].xdata
              ),
            },
          ];
        }
        if (activeName === "2") {
          return [
            {
              name: "X变形速率",
              data: list.map(
                (item) =>
                  item.dataList && item.dataList[0] && item.dataList[0].xspeed
              ),
            },
            {
              name: "Y变形速率",
              data: list.map(
                (item) =>
                  item.dataList && item.dataList[1] && item.dataList[1].xspeed
              ),
            },
            {
              name: "Z变形速率",
              data: list.map(
                (item) =>
                  item.dataList && item.dataList[2] && item.dataList[2].xspeed
              ),
            },
          ];
        }
      }
      return [
        {
          name: "测点数据",
          data: list.map((item) => item.data),
        },
      ];
    },
    xAxisData() {
      return this.dataLine.map((item) => item.theDate);
    },
    timeTypeList() {
      if (this.MonitorTypeId === 3) {
        //表面位移
        return [
          { value: "s_1h", label: "静态10分钟" },
          { value: "10m", label: "动态10分钟" },
          { value: "1h", label: "动态1小时" },
          { value: "2h", label: "动态2小时" },
          { value: "6h", label: "动态6小时" },
          { value: "12h", label: "动态12小时" },
        ];
      }
      if (this.MonitorTypeId === 4) {
        //内部位移
        return [
          { value: "10m", label: "每10分钟" },
          { value: "1h", label: "每1小时" },
          { value: "24h", label: "每24小时" },
        ];
      }
      if (this.MonitorTypeId === 6) {
        //降雨量
        return [
          { value: "1h", label: "1小时" },
          { value: "24h", label: "1天" },
          { value: "7", label: "1周" },
          { value: "30", label: "1月" },
        ];
      }
      return [];
    },
  },

  watch: {
    timeTypeList: {
      immediate: true,
      handler([{ value } = {}]) {
        this.formInline.timeType = value;
      },
    },
    MonitorCode: {
      immediate: true,
      handler() {
        this.getList();
      },
    },
    MonitorTypeId() {
      if (
        this.MonitorTypeId === 1 ||
        this.MonitorTypeId === 2 ||
        this.MonitorTypeId === 5 ||
        this.MonitorTypeId === 6
      ) {
        this.activeName = "1";
      }
    },
  },

  created() {},
  methods: {
    getList() {
      if (!this.MonitorCode) {
        return;
      }
      getMonitorDataResponseGpList(
        this.formInline.endTime,
        this.MonitorCode,
        this.MonitorTypeId,
        this.formInline.startTime,
        this.formInline.timeType
      ).then((res) => {
        // console.log(res, "123456");
        this.firstLevel = res.parameter.firstLevel;
        this.secondLevel = res.parameter.secondLevel;
        this.thirdLevel = res.parameter.thirdLevel;
        this.forthLevel = res.parameter.forthLevel;
        this.dataLine = res.parameter.list || [];
      });
    },
    onSubmit() {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.ChartTab {
  >>> {
    .el-input__inner {
      color: #fff !important;
    }

    .el-tabs__item.is-active {
      color: #fff;
    }

    .el-tabs__item:hover {
      color: #fff;
    }

    .el-tabs__item {
      color: #fff;
    }

    .el-tabs__active-bar {
      background-color: rgb(41, 255, 248);
    }

    .el-form-item__label,
    .el-tabs__item {
      color: #fff;
    }

    .el-button--primary {
      background-color: rgb(2, 156, 179);
      font-size: 0.06rem;
    }
  }

  .content {
    padding: 0 10px;
    width: 100%;
    height: 1.5rem;

    .sub {
      margin-left: 20px;
    }

    .search {
      .el-form-item {
        margin: 0;
      }
    }

    .echarts {
      width: 100%;
      height: 100%;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .margin-margin-margin-left {
    margin-right: 0.12rem !important;
  }
}
</style>
